<template>
    <div><p>{{ count }}</p></div>
    <button @click="count++">+1</button>
</template>

<script setup>
    import { onUnmounted, onMounted } from 'vue';
    const timer = setInterval(() => { console.log("Hello world!!!") }, 1000)
    
    onUnmounted(() => {
        clearInterval(timer)
    })
    onMounted(() => {
        document.querySelector('p').style.color = 'blue'
    })
</script>

<script>
    export default{
        data()
        {
            return { 
                count : 0,
                fn : function(){
                    console.log("fn执行了")
                }
            }
        },
        // methods:{
        //     fn(){
        //         console.log("fn执行了")
        //     }
        // },
        setup()
        {
            console.log("000")
        },
        beforeCreate()
        {
            console.log("111")
            // console.log(this.count)
            // console.log(this.fn)
        },
        created()
        {
            console.log("222")
            // console.log(this.count)
            // console.log(this.fn)
            // this.fn()
            this.timerId = setInterval(() => { console.log(this.count) }, 1000)
        },
        beforeMount()
        {
            console.log("333")
            console.log(document.querySelector('p'))
        },
        mounted()
        {
            console.log("444")
            // console.log(document.querySelector('p'))
            // document.querySelector('p').style.color = 'red'
        },
        beforeUpdate()
        {
            console.log('555')
            // console.log(this.count)
            console.log(document.querySelector('p').innerText)
        },
        updated()
        {
            console.log('666')
            // console.log(this.count)
            console.log(document.querySelector('p').innerText)
        },
        beforeUnmount()
        {
            console.log('777')
            clearInterval(this.timerId)
        },
        unmounted()
        {
            console.log('888')
        }
    }
</script>

<style scoped>

</style>